<template>
	<view class="store-card-component">
		<view class="store-card-main">
			<view class="store-card-header">
				<view class="near-desc">离你最近的门店</view>
				<template v-if="distances">
					<image class="post-icon" src="@/static/images/icon_store_location.png"></image>
					<view class="distance-desc">{{ distances | distancesFilter }}</view>
				</template>
				<!-- <view class="more-store" @click="$emit('more-store')">
					<text>门店信息</text>
					<image class="right-icon" src="@/static/images/icon_store_right.png"></image>
				</view> -->
			</view>
			<view class="store-card-body">
				<view class="store-card-info">
					<view
						class="store-icon-body"
					>
						<view v-if="storeIcon" class="store-pic">
							<view style="height: 100%;">
								<image class="icon-store" mode="heightFix" :src="storeIcon"></image>
							</view>
						</view>
						<view class="open-status">{{ openStatuText }}</view>
					</view>
					<view class="store-base-body">
						<view class="store-base-top">
							<text class="xyxz-hsb-text">{{ storeInfo.store | filterStoreName }}</text>
						</view>
						<view class="store-base-center">
							<view class="user-icon-body" v-if="storeUserList.length > 0">
								<image class="user-icon" v-for="(v, i) in storeUserList" :src="v" :key="i"></image>
							</view>
							<text class="store-finish-user">已为{{ info.visitNum || 0 }}人完成服务</text>
						</view>
						<view class="store-base-bottom">你身边的手机数码服务站</view>
					</view>
				</view>
				<view class="call-store-phone" @click="$emit('recycle', {})">门店回收</view>
			</view>
			<view v-if="storeServiceList.length" class="store-card-footer">
				<view class="store-service-item" v-for="(v, i) in storeServiceList" :key="i">{{ v.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		info: Object
	},
	computed: {
		storeInfo () {
			return this.info.storeInfo || {}
		},
		distances () {
			return this.storeInfo.distance ? `${this.storeInfo.distance}` : ''
		},
		openStatuText () {
			return this.storeInfo.openStatus === '1' ? '营业中' : '休息中'
		},
		storeTel () {
			return this.storeInfo.tel || ''
		},
		storeIcon () {
			return this.storeInfo.storePic ? this.storeInfo.storePic[0] : ''
		},
		storeUserList () {
			return this.storeInfo.userPic || []
		},
		storeServiceList () {
			return this.storeInfo.serviceList || []
		}
	},
	filters: {
		distancesFilter (value) {
			if (/^[0]\.[0-9]+/.test(value)) {
				return parseInt(value * 100) + 'm'
			}
			return Number(value).toFixed(2) + 'km'
		},
		filterStoreName (value) {
			return String(value || '').replace(/(^闲鱼小站×回收宝（)|(）$)/g, '')
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>